<!DOCTYPE html>
<html>
    <head>
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
        <meta charset="UTF-8">
        <meta name="theme-color" content="#fcfcfc">
        <link rel="stylesheet" href="../script/semantic/semantic.min.css">
        <script src="../script/jquery.min.js"></script>
        <script src="../script/ao_module.js"></script>
        <script src="../script/semantic/semantic.min.js"></script>
        <link rel="shortcut icon" type="image/png" href="img/small_icon.png"/>
        <link rel="manifest" crossorigin="use-credentials" href="manifest.json">
        <title>Manga</title>
        <style>
            body{
                background-color:#f0f0f0;
            }

            .manga{
                margin-left: 8px !important;
            }

            .mangaTitle{
                width: 100%;
            }

            #no_manga_info{
                margin-top: 20px;
                display:none;
            }

            .chapterBtn{
                margin-bottom: 5px !important;
            }

            .chapterSelector{

            }

            #banner{
                pointer-events: none;
                user-select: none;
            }

            .manga-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
                gap: 20px;
                padding: 20px 0;
            }

            .manga-thumbnail {
                width: 150px;
                height: 200px;
                object-fit: cover;
                border-radius: 5px;
                cursor: pointer;
                transition: transform 0.2s;
            }

            .manga-thumbnail:hover {
                transform: scale(1.05);
            }

            .manga-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                text-align: center;
            }

            .manga-title {
                margin-top: 10px;
                font-weight: bold;
                word-break: break-word;
                max-width: 150px;
            }

            #mangaDetail {
                display: none;
                padding: 20px 0;
            }

            .detail-view {
                margin-top: 0.5em;
                display: flex;
                gap: 20px;
            }

            .detail-thumbnail {
                flex: 0 0 200px;
            }

            .detail-thumbnail img {
                width: 200px;
                height: 300px;
                object-fit: cover;
                border-radius: 5px;
            }

            .detail-chapters {
                flex: 1;
            }

            .back-button {
                margin-bottom: 20px;
            }
        </style>
    </head>
    <body>
        <div class="ui pointing menu" style="align-items:center;">
            <!-- Left: logo/icon -->
            <div class="ui medium image" id="banenr">
                <img src="img/banner.png" alt="Manga" >
            </div>

            <!-- Center: search (flexible and centered) -->
            <div class="item" style="flex:1; display:flex; justify-content:center;">
                <div class="ui icon input" style="width:60%; max-width:600px;">
                    <input type="text" id="mangaSearch" placeholder="Search manga...">
                    <i class="search link icon" aria-hidden="true"></i>
                </div>
            </div>

            <!-- Right: folder button -->
            <div class="right menu">
                <a class="item" onclick="openUploadFolder();" title="Open upload folder" role="button">
                    <i class="folder open outline large icon" aria-hidden="true"></i>
                </a>
            </div>
        </div>
        <div class="ui container">
            <div id="mangaGrid" class="manga-grid">
                
            </div>
            <div id="mangaDetail">
                <div class="ui basic button back-button" onclick="showGrid();">
                    <i class="arrow left icon"></i> Back
                </div>
                <div class="detail-view ui segment">
                    <div class="detail-thumbnail">
                        <img id="detailImg" src="" alt="Manga Cover">
                        <div class="manga-title" id="detailTitle"></div>
                    </div>
                    <div class="detail-chapters">
                        <h3>Chapters</h3>
                        <div id="chapterList" class="chapterSelector"></div>
                    </div>
                </div>
            </div>
            <div id="no_manga_info">
                <div class="ui message">
                    <h4 class="ui header">
                        <i class="question icon"></i>
                        <div class="content">
                            No Manga Found
                            <div class="sub header">Try upload something to the <a href="#" onclick="openUploadFolder();">user:/Photo/Manga</a> folder?<br>
                                You got no manga? Have you heard of <a href="https://github.com/abc9070410/JComicDownloader" target="_blank">JComicDownloader</a>?</div>
                        <br>
                    </h4>
                </div>
            
                <div class="ui divider"></div>
                <p>Example Folder Structure</p>
                <div class="ui list">
                    <div class="item">
                        <i class="folder icon"></i>
                        <div class="content">
                            <div class="header">[vRoot]:/Photo/Manga/</div>
                            <div class="description">The root folder where the Manga will scan for mangas.</div>
                            <div class="list">
                                <div class="item">
                                <i class="folder icon"></i>
                                <div class="content">
                                    <div class="header">Manga Titles/</div>
                                    <div class="description">The title of this particular manga</div>
                                    <div class="list">
                                        <div class="item">
                                        <i class="folder icon"></i>
                                        <div class="content">
                                            <div class="header">Chapter Name/</div>
                                            <div class="description">The Chapter Name of this group of images</div>
                                            <div class="list">
                                                <div class="item">
                                                <i class="image file icon"></i>
                                                <div class="content">
                                                    <div class="header">Pages</div>
                                                    <div class="description">The manga pages in jpg format</div>
                                                </div>
                                                </div>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="no_search_results" style="display:none;">
            <div class="ui container">
                <div class="ui message">
                    <h4 class="ui header">
                        <i class="search icon"></i>
                        <div class="content">
                            No Search Results
                            <div class="sub header">No manga matches your search term.</div>
                        </div>
                    </h4>
                    <br>
                    <div class="ui basic button" onclick="clearSearch();">Clear Search</div>
                </div>
            </div>
        </div>
        <script>
            var isMobile = false; //initiate as false
            // device detection
            if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
                || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) { 
                isMobile = true;
            }

            var allMangaData = [];

            //List all the scanned titles
            ao_module_agirun("Manga/backend/listTitles.js", {},function(data){
                allMangaData = data;
                renderMangaList(data);
            });

            function renderMangaList(mangaList){
                $("#mangaGrid").html("");
                mangaList.forEach(manga => {
                    var mangaFolderFullPath = manga[0];
                    var chapterCount = manga[1];
                    var titleImagePath = manga[2];
                    var chapterNames = manga[3];
                    var title = manga[0].split("/").pop();
                    var preview = `/media?file=${manga[2]}`;
                    if (manga[2] == null || manga[2] == ""){
                        preview = "./img/notitle.png";
                    }

                    $("#mangaGrid").append(`
                        <div class="manga-item" onclick="showDetail('${mangaFolderFullPath}', '${title.replace(/'/g, "\\'")}', '${preview}', ${JSON.stringify(chapterNames).replace(/"/g, '&quot;')})">
                            <img class="manga-thumbnail" src="${preview}" alt="${title}">
                            <div class="manga-title">${title}</div>
                        </div>
                    `);
                });

                if (mangaList.length == 0){
                    if($("#mangaSearch").val().trim() !== ""){
                        //No search results
                        $("#no_search_results").show();
                        $("#no_manga_info").hide();
                    }else{
                        //No Manga
                        $("#no_manga_info").show();
                        $("#no_search_results").hide();
                    }
                }else{
                     $("#no_manga_info").hide();
                     $("#no_search_results").hide();
                }
            }

            function showDetail(mangaFolderFullPath, title, preview, chapterNames){
                $("#detailTitle").text(title);
                $("#detailImg").attr("src", preview);
                $("#chapterList").html("");
                chapterNames.forEach(chapterName => {
                    $("#chapterList").append(`<a href="viewComic.html#${mangaFolderFullPath}/${chapterName}" class="ui mini basic button chapterBtn manga">${chapterName}</a>`);
                });
                $("#mangaGrid").hide();
                $("#mangaDetail").show();
            }

            function showGrid(){
                $("#mangaDetail").hide();
                $("#mangaGrid").show();
            }

            function filterManga(){
                var term = $("#mangaSearch").val().toLowerCase().trim();
                if(term === ""){
                    renderMangaList(allMangaData);
                }else{
                    var filtered = allMangaData.filter(function(manga){
                        var title = manga[0].split("/").pop().toLowerCase();
                        if(title.includes(term)) return true;
                        var chapters = manga[3];
                        for(var i=0; i<chapters.length; i++){
                            if(chapters[i].toLowerCase().includes(term)) return true;
                        }
                        return false;
                    });
                    renderMangaList(filtered);
                }
            }

            function clearSearch(){
                $("#mangaSearch").val('');
                filterManga();
            }

            //Add event listener to search input
            $("#mangaSearch").on('input', function(){
                filterManga();
            });

            function openUploadFolder(){
                ao_module_openPath("user:/Photo/Manga");
            }
        </script>
    </body>
</html>